<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/15
  Time: 17:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="../css/bootstrapcss/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrapcss/bootstrap-theme.css">
    <script src="../js/jquery-2.2.4.js"></script>
    <script src="../js/bootstrap.js "></script>
    <style>

        ul{
            margin: 0;
            padding: 0;
        }
        li{
            margin: 0;
            padding: 0;
        }
        .top-regist a{
            text-decoration: none;
            color: #0f0f0f;
        }
        .top-regist a:hover{
            cursor: pointer;
            color: orangered;
        }
        #myTab li{
            width:25%;
            float:left;
            height:40px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #myTab li img{
            float:left;
            height: 40px;
        }

        .register-top a{
            text-decoration: none;
        }
        .register-top a:hover{
            cursor: pointer;
            color: red;
        }
        #myTab li p{
            color:white;
            text-align: center;
            text-decoration: none;
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .step a{
            color: white;
            text-align: center;
            text-decoration: none;
        }
        .blue{
            background:#0f9af2;
        }
        .gray{
            background: #dfdfdf;
        }
        .tabPaneUl{
            width: 700px;
            margin: 0 auto;
            list-style: none;
        }

        .tabPaneUl li{
            height: 40px;
            line-height: 40px;
        }
        .tab-pane{
            margin-top: 50px;
        }
        .error{
            font: 11px/1.5 Tahoma,sans-serif,宋体;
            margin-left: 5px;
            color: red;
        }
    </style>

    <script>
        $(document).ready(function(){

        });

        //dom操作
        var domFun={

        };

        //事件操作
        var eventFun={
            setStep:function(index){
                for(var i=2;i<=index;i++){
                    $("#step"+i+"Li").addClass("blue").removeClass("gray");
                    $("#step"+i+"Img").attr("src","../image/blue_blue.png");
                }
                for(var i=index+1;i<=4;i++){
                    $("#step"+i+"Li").addClass("gray").removeClass("blue");
                    $("#step"+i+"Img").attr("src","../image/gray_gray.png");
                }
                $("#step"+(index+1)+"Img").attr("src","../image/blue_gray.png");
            }
        };

        function checkEmail() {
            var myForm = document.getElementById("registerForm");
            var email = /^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (!email.test(myForm.email.value)) {
                document.getElementById("erremail").innerText='email格式不合法';
                return false;
            }else {
                document.getElementById("erremail").innerText='';
                return true;
            }
        }
        function ckeckLoginName() {
            var myForm = document.getElementById("registerForm");
            var loginName = myForm.login_name.value.length;
            if (loginName <6 || loginName > 15) {
                //显示错误信息
                document.getElementById('errorname').innerText='用户名不合法';
                return false;
            }else {
                document.getElementById('errorname').innerText='';
                return true;
            }
        }

        function checkPwd() {

            var myForm = document.getElementById("registerForm");
            var pwd = myForm.password.value;
            var i = pwd.length;
            var regex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if (!regex.test(pwd)){
                document.getElementById("errorpwd").innerText='至少包含六位数字字母组合';
                return false;
            } else {
                document.getElementById("errorpwd").innerText="";
                return true;
            }

        }
        function checkrepwd() {
            var myForm = document.getElementById("registerForm");
            var newpwd = myForm.password.value;
            console.log(newpwd);
            var repwd = myForm.repwd.value;
            console.log(repwd);
            if (newpwd !== repwd) {
                console.log("sassaas")
                document.getElementById("errorrepwd").innerText="密码不一致";
            }else {
                document.getElementById("errorrepwd").innerText="";
            }
        }

    </script>
</head>
<body>
<div class="container">

    <div class="top-regist" style="width: 100%;height: 40px;background-color: #1eacae">
        <div style="padding-top: 10px;padding-left: 5px">
            您的位置：
            <a href="#">首页</a> > <a href="#">注册账号</a>
        </div>
    </div>

    <div class="row clearfix">
            <div style="height: 617px;border: 1px solid white;background-color: silver">
                <div style="padding-left: 230px">
                    <ul id="myTab" role="tablist">
                        <li id="step1Li" class="active blue">
                            <p>1.绑定邮箱</p>
                        </li>
                        <li id="step2Li"  class="gray">
                            <img id="step2Img" src="../image/blue_gray.png"/>
                            <%--<a href="#step2"  onclick="eventFun.setStep(2)"  role="tab" data-toggle="tab">
                                2.填写信息
                            </a>--%>
                            <p>2.填写信息</p>
                        </li>
                        <li id="step3Li"  class="gray">
                            <img id="step3Img" src="../image/gray_gray.png"/>
                            <%--<a href="#step3"  onclick="eventFun.setStep(3)"  role="tab" data-toggle="tab">
                                注册成功
                            </a>--%>
                            <p>3.注册成功</p>
                        </li>

                    </ul>

                </div>

                <form id="registerForm" class="form-horizontal" role="form" action="" method="post">
                    <div id="myTabContent" class="tab-content">
                        <%--注册第一步--%>
                        <div id="step1" class="tab-pane fade active in" style="margin-left: 250px">
                            <div style="margin-left: 190px;margin-top: 100px">
                                电子邮箱：<input type="text" name="email" placeholder="(必须包含@字符)" onblur="checkEmail()">
                                <div><i id="erremail" class="error"></i></div>
                                <br>
                            </div>
                            <div style="margin-top: 20px;margin-left: 280px">
                                <button type="button" class="btn btn-success step">
                                    <a href="#step2"  onclick="eventFun.setStep(2)"  role="tab" data-toggle="tab">
                                        下一步
                                    </a>
                                </button>
                            </div>
                        </div>

                        <%--注册第二步--%>
                        <div id="step2" class="tab-pane fade" style="margin-left: 250px">
                            <div style="margin-left: 190px;margin-top: 100px">
                                您的姓氏：<input type="text" name="first_name"> <br><br>
                                您的名字：<input type="text" name="last_name"> <br><br>
                                设置账号：<input type="text" name="login_name" placeholder="(由六个字母或数字组成)" onblur="ckeckLoginName()">
                                <i id="errorname" class="error"></i><br><br>
                                设置密码：<input type="password" name="password" id="password1" placeholder="(六位数字字母组合)" onblur="checkPwd()">
                                <i id="errorpwd" class="error"></i> <br><br>
                                确认密码：<input type="password" name="repwd" id="repwd1" onblur="checkrepwd()"> <i class="error" id="errorrepwd"></i><br><br>
                                <div>
                                    出生日期：
                                    <input type="date" name="birthday" style="width: 170px;">
                                </div>
                                <br>
                                <div style="">
                                    选择性别： &nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="radio" name="gender" value="男">
                                    <img src="../image/Male.gif" alt="alt">男&nbsp
                                    <input type="radio" name="gender" value="女">
                                    <img src="../image/Female.gif" alt="alt">女
                                </div>
                                <br>
                                <div >个人爱好：
                                    <input type="checkbox" name="hobby" >运动
                                    <input type="checkbox" name="hobby" >聊天
                                    <input type="checkbox" name="hobby" >玩游戏
                                </div>
                                <br>
                                <div >
                                    上传头像： <br><br>
                                    <input type="file"><br>
                                </div>

                                <div style="margin-top: 20px;margin-left: 60px">
                                    <%--<button type="button">
                                        <a href="#step3"  onclick="eventFun.setStep(3)"  role="tab" data-toggle="tab">
                                            下一步
                                        </a>
                                    </button>--%>
                                    <button type="reset" class="btn btn-info step"><a href="#step1"  onclick="eventFun.setStep(1)"  role="tab" data-toggle="tab">
                                        返回
                                    </a></button>
                                    &nbsp;&nbsp;
                                    <button type="button" class="btn btn-success step"><a href="#step3"  onclick="eventFun.setStep(3)"  role="tab" data-toggle="tab">提交
                                    </a></button>

                                </div>
                            </div>
                        </div>
                        <%--注册第三步--%>
                        <div id="step3" class="tab-pane fade" style="margin-left: 250px;margin-top: 100px;">
                            <div style="margin-left: 190px;margin-top: 100px">
                                <button type="button" class="btn btn-success step" onclick="register()">提交</button>
                            </div>
                        </div>
                </form>

            </div>
    </div>
    <div>尾部</div>
</div>

<script src="../js/jquery-2.2.4.js"></script>
</body>
</html>
